<template>
  <div class="home">
    <HelloWorld />
    <sort-list></sort-list>
    <button @click="getApi">网络请求</button>
    <h1>{{loading?'加载中':'加载完成'}}</h1>
    <div>{{res}}</div>
    <button @click="removeData">删除缓存</button>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import SortList from "@/components/SortList.vue";
import testAPI from "@/request/api/test";
// import StorageUtils from "@/utils/storage_utils.js";
// import { StorageTypeEnum } from "@/utils/storage_utils.js";
export default {
  name: "Home",
  components: {
    HelloWorld,
    SortList
  },
  data() {
    return {
      loading: false,
      res: {},
      arr1: [
        { a1: "1", a2: "11" },
        { a1: "2", a2: "22" },
        { a1: "3", a2: "33" }
      ],
      arr2: [
        { a1: "21", a2: "211" },
        { a1: "22", a2: "222" },
        { a1: "23", a2: "233" }
      ]
    };
  },
  created() {
    this.setArr();
  },
  methods: {
    setArr() {
      let arr = {};
      let arrKey = ["arr1", "arr2"];
      for (let i in arrKey) {
        arr[`a1_${i}`] = [];
        arr[`a2_${i}`] = [];
        for (let j in this[arrKey[i]]) {
          arr[`a1_${i}`].push(this[arrKey[i]][j].a1);
          arr[`a2_${i}`].push(this[arrKey[i]][j].a2);
        }
      }
      console.log(arr);
    },
    async getApi() {
      this.loading = true;
      try {
        let res = await testAPI.getTest();
        this.res = res;
        this.loading = false;
      } catch (e) {
        console.log(e);
        this.loading = false;
      }
    },
    removeData() {
      console.log(1);
      // StorageUtils.removeData(StorageTypeEnum.cookieStorageType, "a");
    }
  }
};
</script>
